<template>
  <div>
    <!--磅单模板编辑dialog-->
    <el-dialog
      :title="title"
      width="570px"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        label-width="105px"
        ref="editForm"
        :model="editForm"
        :rules="rules"
      >
        <el-form-item label="审批事项编号:" >
          <el-input v-model="editForm.approvelItemType" disabled></el-input>
        </el-form-item>
        <el-form-item label="审批事项名称:" >
          <el-input v-model="editForm.approvelItemName" disabled></el-input>
        </el-form-item>
        <el-form-item label="审批条件:" prop="approvelCondition">
          <el-input type="textarea" v-model="editForm.approvelCondition" rows="3"></el-input>
          <span style="color: deepskyblue">【变量说明】<br>
          {{this.editForm.varDescribe}}
          </span>
        </el-form-item>
          <el-form-item label="流程分类:" >
                  <SelectTree
                      ref="parent"
                      :props="{
                          value: 'id',             // ID字段名
                          label: 'name',         // 显示名称
                          children: 'children'    // 子级字段名
                        }"
                      :url="`/extension/actCategory/treeData`"
                      :value="inputForm.parent.id"
                      :clearable="true"
                      :accordion="true"
                      @getValue="(value) => {inputForm.parent.id=value}"/>
          </el-form-item>
        <el-form-item label="工作流ID:" >
          <el-select clearable   v-model="editForm.flowId" @change="getDivision">
            <el-option
              v-for="item in  selectData"
              :key="item.value"
              :label="item.value"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作流名称:" >
          <el-input v-model="editForm.flowName"  disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import SelectTree from '@/components/treeSelect/treeSelect.vue'
import { edit } from '@/api/basis/approveItemFlow/approveItemFlow.js'
export default {
    components: {SelectTree},
  data () {
    return {
      method: '',
      title: '',
      editVisible: false,
      selectData: [],
        visible: false,
        inputForm: {
            id: '',
            parent: {
                id: ''
            },
            name: '',
            sort: '',
            remarks: ''
        },
      editForm: {
        approvelItemType: '',
        approvelItemName: '',
        varDescribe: '',
        approvelCondition: '',
        flowId: '',
        flowName: '',
        id: ''
      },
      rules: {
        approvelCondition: [{required: true, message: '审批条件不能为空', trigger: 'change'}]
      },
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      }
    }
  },
  methods: {
      handleClose (done) {
        this.$Msg.confirm({
            title: '您确定要关闭吗？',
            content: this.GLOBAL.FORM_CLOSE_TIPS,
            confirmCall: () => {
                done()
            }
        })
    },
    init (method, editForm, obj) {
      if (method === 'add') {
        this.editVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].resetFields()
          this.editForm = {}
        })
        this.editForm.id = ''
        this.selectDataList()
        this.title = '新增审批设置'
      } else if (method === 'edit') {
        this.editVisible = true
        this.method = method
        this.$nextTick(() => {
          this.$refs.editForm.clearValidate()
          this.editForm = editForm
        })
        this.selectDataList()
        this.title = '审批设置'
       this.inputForm.parent.id = obj.parent.id
      }
    },
    close () {
      this.editForm = {}
      this.editVisible = false
    },
    // 获取数据列表
    selectDataList () {
      this.loading = true
      this.$http({
        url: '/flowable/model/selectData',
        method: 'get',
        params: {
          'filter': 'processes'
        }
      }).then(({data}) => {
        if (data.code === '200') {
          this.selectData = data.result
          this.loading = false
        }
      })
    },
    getDivision (event) {
      console.log(event)
      this.editForm.flowName = event.label
      this.editForm.flowId = event.value
      console.log(this.editForm.flowId)
    },
    doSubmit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          console.log(this.editForm)
          edit(this.editForm).then(({data}) => {
            if (data.code === '200') {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.editVisible = false
              this.$emit('refreshDataList')
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-container {
  margin-bottom: 20px;
  display: flex;
  .label-container {
    width: 150px;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
  }
  .form-container {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    width: 200px;
  }
}
</style>
